<template>
  <div class="family-box">
    <div class="containter">
      <p class="juzi">一亿人都在用的拼多多App被苹果下架 会减少多少用户呢？</p>
      <img src="../../assets/img/mine/mine-star_03.png" alt="">
      <p class="quan">头像</p>
    </div>
    <div class="dasis">
         <p class="xinxi">名字</p>
         <div class="span-box">
           <router-link tag="span" to="/birthday">
                  点击输入>
           </router-link>
         </div>
         <i class="iconfont icon-mubiao"></i>
    </div>
    <div class="dasis">
         <p class="xinxi">慢性疾病</p>
         <span class="span1"> > </span>
    </div>
    <div class="dasis">
         <p class="xinxi">性别</p>
         <span class="quan-v">女</span>
         <span class="quan-n">男</span>
    </div>
    <div class="dasis">
         <p  class="xinxi">生日</p>
         <span class="span2"> > </span>
    </div>
    <div class="dasis">
         <p class="xinxi">城市</p>
    </div>
</div>
</template>
<script>
// import "./collection/add"
export default {
  name: "Family",
  data(){
    return{

    }
  }
}
</script>
<style lang="less" scoped>
.family-box{
  .containter{
    width: 100%;
    height: 3rem;
    background: #fff;
    margin: 0 0 0.2rem 0;
    .juzi{
        width:60%;
        padding-top: 0.2rem;
        padding-bottom:0.2rem;
        padding-left: 20%;
        text-align: center;
    }
    img{
      width: 1rem;
      height:1rem;
      margin: 0 3.2rem;
    }
    .quan{
          font-size: 0.02rem;
          margin: 0.1rem 3rem;
          background: #f5f5f5;
          text-align: center;
          border-radius: 0.25rem;
          border: 0.01rem solid #8AC007;
          padding: 0.2rem;
          width: 1rem;
          height: 0.12rem;
          line-height: 0.15rem;
    }
  }
  .dasis{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background: #fff;
    .xinxi{
      line-height: 1rem;
      padding-left: 0.15rem;
      float: left;
    }
    .span1{
      margin-left: 6rem;
    }
    span{
      margin-left: 6.55rem;
    }
    .span-box{
      height: 1rem;
      line-height: 1rem;
      span{
        margin-left: 5.3rem;
        letter-spacing: 0.03rem;
      }
    }
    .quan-n,.quan-v{
        font-size: 0.02rem;
        float: right;
        background: #f5f5f5;
        text-align: center;
        border-radius: 0.25rem;
        border: 0.01rem solid #8AC007;
        padding: 0.2rem;
        width: 0.2rem;
        margin-left: 0.05rem;
        margin-right: 0.07rem;
        margin-top: 0.2rem;
        height: 0.2rem;
        line-height:0.3rem;
    }
  }
  .dasiss{
    width: 100%;
    height: 1rem;
    margin: 0.05rem 0;
    background: #fff;
    float: left;
    p{
      margin-left: 0.2rem;
    }
    span{
      margin-left: 7.2rem;
    }
  }
}



</style>
